<template>
	<u-popup :show="show" @close="$emit('change',false)"  @open="open"  mode='center' round='16'>
		<view class="w-toast">
			<view class="toast-title" v-if='title'>
				{{title}}
			</view>
			<view class="toast-content" :style="{'text-align':contentAlign}">
				{{content}}
			</view>
			<view class="toast-action">
				<w-button v-if="showCancel" :pain="true" size="lsA" shape="circle" @click='event(false)'>{{cancelText}}</w-button>
				<w-button  :style="{width:!showCancel?'100%':''}" size="lg" shape="circle" @click='event(true)'>{{handleLang(submitText)}}</w-button>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		name:"w-toast",
		props:{
			show:{
				type:Boolean,
				default:false
			},
			title:{
				type:String,
				default:"提示"
			},
			showCancel:{
				type:Boolean,
				default:true
			},
			content:{
				type:String,
				require:true
			},
			afterOpen:{
				type:Function,
			},
			cancelText:{
				type:String,
				default:"取消"
			},
			submitText:{
				type:String,
				default:"确认"
			},
			btnType:{
				type:String,
				default:'colorful'
			},
			contentAlign:{
				type:String,
				default:"left"
			}
		},
		model:{
			prop:'show',
			event:"change"
		},
		data() {
			return {
				
			};
		},
		methods:{
			close(){
				
			},
			open(){
				if(this.afterOpen){
					this.afterOpen()
				}
			},
			event(data){
				this.$emit('action',data);
				this.$emit('change',false)
			}
		}
	}
</script>

<style lang="scss">
.w-toast{
	width:654rpx;
	@extend .bg-color-white,.br-16;
	padding-top: 72rpx;
	padding-left: 52rpx;
	padding-right: 52rpx;
	padding-bottom: 56rpx;
	>.toast-title{
		@extend .font-color-black,.text-center,.font-size-16,.font-w-500;
	}
	>.toast-content{
			@extend .font-size-14,.pt-16,.font-w-400;
	}
	>.toast-action{
		margin-top: 112rpx;
		@extend .flex,.flex-js-sb;
		>.z-btn{
			height: 80rpx;
			width:252rpx;
			border-radius: 40rpx;
		}
	}
}
</style>